<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘</title>
	</head>
	<style type="text/css">
		#wrapper {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-attachment: fixed;
			background-image: url("../img/教室.jpeg");
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		#content {
			text-align: center;
		}

		.box {
			display: inline-block;
		}

		p {
			font-size: 1.3rem;
			color: #feeeed;
			font-weight: bold;
			-webkit-text-stroke: 0.075rem #000000;
		}
	</style>
	<body onkeypress="move(event)">
		<div class="audios_tools"></div>
	</body>
	<script type="text/javascript">
		// 休眠函数，利用promise表示异步执行结果，设置计时器，等待执行成功即resolve
		function sleep(time) {
			return new Promise((resolve) => setTimeout(resolve, time));
		}
		// 按键事件，不同按键执行不同效果
		function move(e) {
			try {
				// 改变id为按键字符串对应的元素的背景色500s
				if (e.keyCode >= 33 && e.keyCode <= 122) {
					document.getElementById(String.fromCodePoint(e.keyCode)).style.background = "#FEEEED";
					sleep(500).then(() => {
						document.getElementById(String.fromCodePoint(e.keyCode)).style.background = "#ff000000";
					})
				}
				// 抛出错误，即不存在的字符，这个键盘目的是为了制作61键钢琴，所以有些键是没有的
			} catch (err) {
				pass = 0;
			}
		}
		// 按键名
		keysName = ['!', '@', '$', '%', '^', '&', '(', 'Q', 'W', 'E', 'T', 'Y', 'I', 'O', 'P'];
		// 对应的角色名
		roleName = ['一代', '一护', '亚斯塔', '佐助', '史莱姆', '善逸', '女帝', '娜美', '尤诺', '布尔玛', '张楚岚', '彭格列', '悟空', '意大利牛郎团', '承太郎'];
		// 添加按键图片
		imgbox = '<div id="wrapper"><div id="content">';
		// 遍历按键名，拼接字符串
		for (n in keysName) {
			imgbox += '<div class="box" id="' + keysName[n] + '"><img src="../img/' + roleName[n] + '.png" alt="' + roleName[n] +
				'"><p>' + keysName[n] + '</p></div>'
		}
		imgbox += '</div><div id="content">';
		keysName = ['S', 'D', 'G', 'H', 'J', 'L', 'Z', 'C', 'V', 'B', '1', '2', '3', '4', '5'];
		roleName = ['数码宝贝', '星际宝贝', '杰洛齐贝林', '枕头悟', '索隆', '花千骨', '梅长苏', '海绵宝宝', '炭治郎', '小当家', '猫耳银时', '王也', '蝙蝠侠', '皮卡丘',
			'神乐'
		]
		for (n in keysName) {
			imgbox += '<div class="box" id="' + keysName[n] + '"><img src="../img/' + roleName[n] + '.png" alt="' + roleName[n] +
				'"><p>' + keysName[n] + '</p></div>'
		}
		imgbox += '</div><div id="content">';
		keysName = ['6', '7', '8', '9', '0', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'a']
		roleName = ['藤原千花', '蝴蝶忍', '柯南', '贝吉塔', '贝吉特', '超四悟空', '路飞', '辉夜', '迪奥', '里包恩', '金木', '鸣人', '伍六七', '借东西的小人阿莉埃蒂',
			'库丘林', '假面骑士w'
		]
		for (n in keysName) {
			imgbox += '<div class="box" id="' + keysName[n] + '"><img src="../img/' + roleName[n] + '.png" alt="' + roleName[n] +
				'"><p>' + keysName[n] + '</p></div>'
		}
		imgbox += '</div><div id="content">';
		keysName = ['s', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'z', 'x', 'c', 'v', 'b', 'n', 'm']
		roleName = ['千与千寻', '小丑女', '爱德华', '小新', '懒羊羊', '机器猫', '派大星', '白羊座', '艾斯', '虹猫', '画笔银时', '贞德', '首席', '樱木', '泉新一']
		for (n in keysName) {
			imgbox += '<div class="box" id="' + keysName[n] + '"><img src="../img/' + roleName[n] + '.png" alt="' + roleName[n] +
				'"><p>' + keysName[n] + '</p></div>'
		}
		imgbox += '</div></div></div></div></div>'
		// 写入html
		document.write(imgbox)
	</script>
</html>
